<template>
    <div class="videos">
         <video-player  class="video-player vjs-custom-skin"
          ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
        ></video-player> 
    </div>
</template>
<script>
export default {
    name:"Videos",
    props:['videoList'],
    data(){
        return{
            playerOptions : {
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', 
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [
                        {
                            src: this.videoList.url,// 路径
                            type: 'video/mp4'  // 类型
                        }, 
                    ],
                    //poster: "../../static/images/test.jpg", //你的封面地址
                    width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar:false,
                    // controlBar : {
                    //     timeDivider : true,//当前时间和持续时间的分隔符
                    //     durationDisplay : true,//显示持续时间
                    //     remainingTimeDisplay : false,//是否显示剩余时间功能
                    //     fullscreenToggle : true  //全屏按钮
                    // },

                },
                playing:true
        }
    },
    methods:{
        playerOrStop(){
            if(this.playing){
                this.$refs.videoPlayer.player.pause();
                this.playing=false;
            }else{
                this.$refs.videoPlayer.player.play();
                this.playing=true;
            }
        }
    }
}
</script>
<style >
    .videos{
        position: relative;

    }
    /* 按钮样式 */
    .videos .vjs-custom-skin > .video-js .vjs-big-play-button{
        background: rgba(0, 0, 0, 0.1);
        /* font-size: 30px; */
        border-radius: 50%;
        width: 70px;
        transform: translate(30%,70%);
        position: absolute;
    }
</style>
